<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 500px;
            border: 1px solid rgb(228, 173, 173);
            overflow: hidden;
            margin: 40px auto;
            position: relative;
        }

        .beijing {
            width: 400px;
            height: 1200px;
            background-color: rgb(142, 224, 213);
            overflow: hidden;
            position: absolute;
            left: 0;
            top: -700px;
        }


        .beijing>p {
            border-bottom: 1px solid rgb(177, 174, 23);
            margin-top: 100px;
        }

        .feiji {
            width: 100px;
            height: 50px;
            background: linear-gradient(rgb(30, 72, 134), rgb(219, 203, 113));
            border-radius: 30px;
            position: absolute;
            top: 430px;
            left: 150px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="beijing">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="feiji"></div>
    </div>

    <script>
        const bei = document.querySelector('.beijing')
        const fei = document.querySelector('.feiji')

        let num = 0
        // 背景往下移动
        setInterval(() => {
            num += 20
            // console.log(num);
            if (num >= 700) num = 0
            bei.style.top = (-700 + num) + 'px'
        }, 1000)

        // 给window绑定键盘按下事件
        window.onkeydown = function (e) {
            // console.log(e);

            // 飞机向前移动
            if (e.keyCode == 87) {
                // 获取飞机盒子距离顶部的距离,然后每次减10,直到top值为30
                let top = fei.offsetTop - 10;
                if(top <= 30) top = 30
                fei.style.top = top + 'px'
            }

            // 飞机向后移动
            if (e.keyCode == 83) {
                // console.log(fei.offsetTop);
                let top = fei.offsetTop + 10;
                if(top >= 440) top = 440
                fei.style.top = top + 'px'
            }

            // 飞机向左移动
            if (e.keyCode == 65) {
                // console.log(fei.offsetLeft);
                let left = fei.offsetLeft - 10;
                if(left <= 30) left = 30
                fei.style.left = left + 'px'
            }

            // 飞机向右移动
            if (e.keyCode == 68) {
                // console.log(fei.offsetLeft);
                let left = fei.offsetLeft + 10;
                if(left >= 270) left = 270
                fei.style.left = left + 'px'
            }
        }

    </script>
</body>

</html>